<template>
  <div>
    <!--
        action 必传 需要给一个后端接口地址, elementui会帮你发送请求
        我们不需要它自动发请求, 我们将来自己发送请求, 此时给空 不让他报错

        list-type 文件列表的类型, 此处选择的是以照片墙的形式进行展示
        limit 限制用户上传图片数量
      -->
    <!-- 封装上传图片组件
        新建UploadImage/index.vue新建
        然后再index.js引入注册这个组件
        然后在空白页面试试能不能用
        在element里面搜索上传，找到照片墙代码使用它。
        注意list-type文件类型设置为 picture-card
        注意 action这里需要传空值就不会报错
        加号是一个图标 <i class="el-icon-plus" />
      -->
    <!--
          file-list 存放文件列表数组
         on-preview 当你点击预览的+号时, 会自动触发, 接收一个函数, 会把点击的图片文件作为参数传递
       -->
    <el-upload
      :class="{disabled: isDisabled}"
      action=""
      list-type="picture-card"
      :file-list="fileList"
      :on-preview="handlePictureCardPreview"
      :limit="limit"
      :on-remove="handleRemove"
      :http-request="handleUpload"
      :on-change="handleChange"
      :before-upload="handleBeforeUpload"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 新建一个对话框，用来存放点击展示的图片，
        对话框需要显示
        close是关闭对话框的函数
        visible是对话框的关闭和开启需要与on-preview相配合使用-->
    <el-dialog width="30%" title="图片预览" :visible="dialogVisible" @close="dialogVisible = false">
      <!-- img用来展示点击的图片 -->
      <img :src="dialogImageUrl" style="width: 100%;">
    </el-dialog>
  </div>
</template>

<script>
import COS from 'cos-js-sdk-v5' // 导入腾讯云的包(sdk)
// 创建一个腾讯云对象存储实例
const cos = new COS({
  SecretId: 'AKIDYw5ybx2qNdcKlunPkob7LJ9nBI8h02mF', // 身份识别ID
  SecretKey: 'IJ4YmiNlrgHgqkNimZ5KIyNUKtWsxlJb' // 身份秘钥
})

export default {
  name: 'ImageUpload',
  props: {
    limit: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      // 1. 上传文件列表
      fileList: [],
      // 2. 图片预览对话框显示/隐藏
      dialogVisible: false,
      // 3. 用于展示的图片地址,
      dialogImageUrl: ''
    }
  },
  computed: {
    // 1. 控制上传按钮显示/隐藏
    isDisabled() {
      // 当数组的长度大于限制的长度的时候返回tuer
      return this.fileList.length >= this.limit
    }
  },
  methods: {
    // 1. 图片预览
    handlePictureCardPreview(file) {
      // console.log(file)
    //   将点击图片的地址赋值给dialogImageUrl
      this.dialogImageUrl = file.url
      //   打开对话框
      this.dialogVisible = true
    },
    //  on-remove删除去图片
    handleRemove(file, fileList) {
      // file 你当前删除的文件对象
      // fileList 结构中的文件列表
      // this.fileList 自己的文件列表
      // 其实, 你删除以后, 结构中的文件列表更新了, 但是我们自己的文件列表fileList还没更新
      // 怎么办呢? 手动同步
    //   console.log(file, fileList, this.fileList)
      // 方式一:
      // this.fileList = this.fileList.filter(item => item.uid !== file.uid)
      // 方式二:
      // 注意: 引用数据类型不能直接赋值, 要浅拷贝再赋值(形成独立的数组)
      this.fileList = [...fileList]
    //   console.log(fileList)
    //   console.log([...fileList])
    //   console.log(this.fileList)
    //   console.log(this.fileList = [...fileList])
    },
    // http-request覆盖默认的上传行为，可以自定义上传的实现，这里调用了腾讯云接口
    handleUpload(obj) {
    //   console.log('正在上传图片')
      console.log(obj)
      // 根据上传的对象的uid去数组中找到该对象 修改scr地址
      const uid = obj.file.uid
      const fileObj = this.fileList.find(item => item.uid === uid)

      // 必须在上传之前把status的值改成uploading, 不然不会显示进度条
      fileObj.status = 'uploading'

      cos.putObject({
        Bucket: 'hrsass-49-cs-1312445828', /* 填入您自己的存储桶，必须字段 */
        Region: 'ap-shanghai', /* 存储桶所在地域，例如ap-beijing，必须字段 */
        Key: 'DMW' + (+new Date()) + '-ASC' + obj.file.name, /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
        Body: obj.file, /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */
        onProgress: (progressData) => {
          console.log(progressData)
          // 设置上传的进度
          fileObj.percentage = parseInt(progressData.percent * 100)
        }
      }, (err, data) => {
        // 此处一定要改成箭头函数, 否则拿不到this
        if (err) {
          this.$message.error('上传图片操作失败~')
          return
        }

        // 3.2 更新上传的状态
        // 为了让用户感知到上传的进度, 可以做一个1s延迟
        setTimeout(() => {
          fileObj.status = 'success'
        }, 1000)

        // 3.3 用图片的线上url地址替换本地的临时地址
        fileObj.url = 'https://' + data.Location
      })
    },
    // 文件状态改变时的钩子
    handleChange(file, fileList) {
      this.fileList = [...fileList]
    },
    // 图片文件在真正上传之前触发,
    handleBeforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return false
      }

      return true
    }
  }
}
</script>
<style lang="scss" scoped>
.disabled {
  ::v-deep {
    .el-upload--picture-card {
      display: none;
    }
  }
}

</style>
